<template>
	<view class="container" :data-theme="theme">
		<view class="header"></view>
		<view class="content">
		<!-- 这里是可滚动的内容 -->
		<scroll-view class="scroll-view" scroll-y>
				<view class="scroll-view-inner">
					<view class="card_list" v-for="(current,index) in ticketUploadData" :key="index">
						<view class="inner" style="background-color: #f9f7ff;">
							<view class="checke_item">
								<view class="checke_top">
									<view class="check_left">
										<view class="checke_img">
											<image :src="current.iconUrl" mode="">
											</image>
										</view>
										<view class="product_right">
											<view style="width: 320rpx;"><span
													style="font-weight: bold;">{{current.productName}}</span>
											</view>
											<view><span style="font-weight: bold;margin-right: 10rpx;">规格：</span>
												<span>{{current.attrName.slice(2)}}</span>
											</view>
										</view>
									</view>
									<view class="check_right">
										<view></view>
										<view :style="{color:current.state == 2 ? 'red' :  ''}"
											@click="handleAuditFail(current)">
											{{current.state == 2 ? '审核失败' :  ''}}
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="footer">
							<button class="footer_button" @click="handleTickUpload(current)"
								:disabled="current.state == 1 || current.state == 3"
								:style="{background: current.state == 0? 'red' : current.state == 1 ? 'black' :  current.state == 2 ? 'red' :  current.state == 3 ? 'green' : '' }">{{stateList[current.state]}}</button>
						</view>
					</view>
					<u-empty v-if="!ticketUploadData.length" icon="http://cdn.uviewui.com/uview/empty/data.png"
						style="padding-top: 50%;"></u-empty>
					<uni-load-more v-else :status="moreStatus"></uni-load-more>
				</view>
			</scroll-view>
	</view>
	</view>
</template>
<script>
	// ------------------引入接口---------------
	import {
		getTicketUploadProgressApi
	} from "@/api/ticketUpload.js"
	import {
		setThemeColor
	} from '../../../utils/setTheme';

	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
				// 拉下数据状态
				moreStatus: 'more',
				// 查询票证信息的params参数
				ticketUploadParams: {
					page: 1,
					limit: 10,
					depotId: 0, // 仓库Id
				},
				// 票证信息data
				ticketUploadData: [],
				// 票证信息
				ticketInfo: {},
				attributeName: '', // 属性规格
				// 0：未提交，1：提交未审核 ，2：审核未通过，3：审核通过，4：已删除
				// 审核状态
				stateList: {
					0: '上传票证',
					1: '审核中',
					2: '上传票证'
				}


			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.initData()
		},
		methods: {
			// 加载列表
			handleScroll() {
				if (this.moreStatus == 'more') {
					this.ticketUploadParams.page++
					this.getTicketUploadList()
				}
			},
			// 初始化数据
			initData() {
				this.getTicketUploadList()
			},
			// 审核失败提示
			handleAuditFail(cur) {
				uni.showModal({
					title: '失败原因',
					content: `${cur.auditMessage}`,
					showCancel: false,
					success: (res) => {
						if (res.confirm == true) {

						} else {

						}
					}
				})
			},
			// 上传资质
			handleTickUpload(item) {
				this.addAttrImage(item)
				uni.navigateTo({
					url: `/pages/ticketUpload/components/uploadReport?ticketInfo=${JSON.stringify(this.ticketInfo)}`
				});
			},
			addAttrImage(ticketInfo) {
				this.ticketInfo = ticketInfo
				let ticketinfoMap = this.ticketInfo.ticketinfoMap
				this.ticketInfo.ticketinfoMap = []
				for (let key in ticketinfoMap) {
					if (ticketinfoMap.hasOwnProperty(key)) {
						// 解析map数据
						let ticketInfoList = []
						ticketInfoList.push(...ticketinfoMap[key])
						ticketInfoList = ticketInfoList.map(item => {
							return {
								...item,
								content: [],
							}
						})
						this.ticketInfo.ticketinfoMap.push(...ticketInfoList)
					}
				}
				// 添加imageIndex下标
				for (let j = 0; j < this.ticketInfo.ticketinfoMap.length; j++) {
					this.ticketInfo.ticketinfoMap[j]['imageIndex'] = String(j + 1)
					this.ticketInfo.ticketinfoMap[j]['selectDateTypeName'] = ""
					this.ticketInfo.ticketinfoMap[j]['indateIsShow'] = true // 有效期方式展示
					this.ticketInfo.ticketinfoMap[j]['indateArrowsIsShow'] = false // 选择有效期类型箭头改变
					this.ticketInfo.ticketinfoMap[j]['indateIndex'] = null // 有效期索引值

					this.ticketInfo.ticketinfoMap[j]['arrow'] = false // 日期箭头
					this.ticketInfo.ticketinfoMap[j]['startDate'] = null
					this.ticketInfo.ticketinfoMap[j]['endDate'] = null
					this.ticketInfo.ticketinfoMap[j]['assignDate'] = null
				}
				this.ticketInfo.proceedOrHistoryType = 1 // 历史2  进行1

			},
			// 搜索仓库
			searchDepotId(depotId) {
				this.ticketUploadParams.depotId = depotId
				this.getTicketUploadList(true)
			},
			// --------------------------api接口---------------------------------
			async getTicketUploadList(status) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if (status) {
					this.ticketUploadParams.page = 1
					this.ticketUploadData = []
				}
				try {
					let result = await getTicketUploadProgressApi(this.ticketUploadParams)
					if (result.code == 200) {
						let items = result.data.list == null ? [] : result.data.list
						if (items.length > 0) {
							if (this.ticketUploadParams.page == result.data.pages) {
								this.moreStatus = 'noMore'
							} else {
								this.moreStatus = 'more'
							}
							// 解析attr属性
							this.ticketUploadData = items == null ? [] : [...this.ticketUploadData, ...items.map(
								item => {
									const parsedObject = JSON.parse(item.attrName);
									// 解析规格属性
									for (const key in parsedObject) {
										if (parsedObject.hasOwnProperty(key)) {
											this.attributeName = `${key}: ${parsedObject[key]}`
										}
									}
									return {
										...item,
										attrName: this.attributeName
									}
								})]
						} else {
							this.moreStatus = 'noMore'
						}
					} else {
						this.$util.Tips({
							title: result.message
						})
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
				} catch (e) {
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log(e)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;


	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {
		.card_list {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 20rpx;
			// padding-top: 50rpx;
			margin: 10rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			position: relative;

			// 内部内容
			.inner {
				margin-top: 10rpx;
				padding: 20rpx 0;



				.checke_item {
					font-size: 21rpx;
					display: flex;
					flex-direction: column;
					padding: 10rpx 20rpx;
					margin: 0 20rpx;
					border-radius: 20rpx;

					.checke_top {
						display: flex;
						justify-content: space-between;

						.check_left {
							display: flex;
							align-items: center;

							.checke_img {
								margin-right: 20rpx;

								image {
									width: 80rpx;
									height: 80rpx;
								}

							}

							.product_right {
								line-height: 40rpx;
							}
						}

						.check_right {

							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.num {
								margin-bottom: 10rpx;
								font-weight: bold;
							}
						}
					}

					.checke_bottom {
						display: flex;
						align-items: center;
						font-size: 21rpx;
						margin: 10rpx 0;
						background: #e3edf3;
						padding: 10rpx;
						border-radius: 10rpx;
					}
				}
			}

			// 底部按钮
			.footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				.footer_button {
					width: 130rpx;
					height: 50rpx;
					line-height: 50rpx;
					// @include main_bg_color(theme);
					color: #ffffff;
				}
			}
		}
	}
</style>